<template>
    <div class="addDevice">
        <div class="userName">嘿~~1111</div>
        <div class="fuselageCode" >
            <cell-group>
                <field v-model="fuselageCode" placeholder="手动输入机身编码或扫码获取机身编码" @input="getDeviceInfo(null)" type="number" :error="fuselageCodeSuccess">
                    <icon name="scan" color="#ff0000" slot="right-icon"  size="20px" @click="scanQRCode" />
                </field>
            </cell-group>
            <cell-group v-if="midxuc013 != ''">
                <cell title-style="flex-grow:0.5"  >
                    <template slot="title">
                        <van-image
                            width="100px"
                            height="100px"
                            src="" />
                    </template>
                    <template>
                        <div style="text-align: left">{{ midxuc013 }}</div>
                    </template>
                </cell>
            </cell-group>
        </div>
        <div class="banner">
            <label class="field">
                <div class="text">
                    姓名：
                </div>
                <input required class="name" type="text" name="name" v-model="name" placeholder="请输入姓名"/>
            </label>

            <label class="field">
                <div class="text">
                    性别：
                </div>
                <radio-group class="gender" v-model="gender" >
                    <radio name="1">男</radio>
                    <radio name="2">女</radio>
                </radio-group>
            </label>
            <label class="field">
                <div class="text">
                    联系方式：
                </div>
                <input required class="contact" type="text" name="contact" v-model="contact" placeholder="请输入手机号或电话号码"/>
            </label>
            <label class="field">
                <div class="text">
                    所在区域：
                </div>
                <input name="area"  v-model="areaName" @click="showPopup" placeholder="请选择省市区" readonly/>
                <popup
                    @click-overlay="shut"
                    v-model="show"
                    position="bottom"
                    :style="{ height: '40%' }">
                    <Area  :area-list="areaList" v-model="areaValue" @confirm="onAddrConfirm" @cancel="shut"/>
                </popup>
            </label>
            <label class="field">
                <div class="text">
                    街道名称：
                </div>
                <input class="street" type="text" name="street"  v-model="street" placeholder="请输入街道名称"/>
            </label>
            <label class="field">
                <div class="text">
                    详细地址：
                </div>
                <input class="address" type="text" name="address"  v-model="address" placeholder="请输入详细地址"/>
            </label>
        </div>
        <div class="description1">门锁保修卡内含机身编码和个人信息，请如实填写</div>
        <div class="description2">如果机身编码和个人信息错误将无法生成有效保修卡</div>
        <div class="buttonList" v-for="(item,index) in items">
            <div class="flex">
                <div class="flexItem" @click="submit">{{item.name}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Cell,CellGroup,Field,RadioGroup, Radio,Icon,Area,Popup,Image,Toast  } from 'vant';
    import AreaList from '../../js/areaList';
    import {getDeviceInfo,post, sleep,getCookie} from "../../js/utils";
    import wx from "weixin-js-sdk";

    export default {
        name: 'AddDevice',
        components: {
            Cell,
            CellGroup,
            Field,
            RadioGroup,
            Radio,
            Icon,
            Area,
            Popup,
            AreaList,
            vanImage: Image,
        },
        data () {
            return {
                fuselageCode: '',
                fuselageCodeSuccess:false,
                info:{},
                midxuc013:'',
                name: '',
                gender: '',
                contact: '',
                show: false,
                areaList:AreaList,
                areaName: '',
                areaValue: '',
                areaData: '',
                street: '',
                address: '',
                items: [{name: '确认'}],
            }
        },
        created () {

        },
        methods: {
            async getDeviceInfo(fuselageCode){
                if(fuselageCode!=null){
                    this.fuselageCode = fuselageCode
                }
                if(/^\d{8}$/.test(this.fuselageCode)){
                    let res = await getDeviceInfo(this.fuselageCode)
                    this.info = res
                    this.midxuc013 = res.midxuc013
                    this.fuselageCodeSuccess = false;
                    let ret = await post("/user/listGateways")
                    let flag = false
                    ret.guarantee.map((item)=>{
                        let info = JSON.parse(item.Info)
                        if(item.Id == this.fuselageCode){
                            flag = true
                            this.name = info.name;
                            this.gender = info.gender;
                            this.contact = info.contact;
                            this.areaName = info.areaName;
                            this.street = info.street;
                            this.address = info.address;
                        }
                    })
                    if(flag==false){
                        this.name = '';
                        this.gender = '';
                        this.contact = '';
                        this.areaName = '';
                        this.street = '';
                        this.address = '';
                    }
                }else{
                    this.info = {};
                    this.midxuc013 = ''
                    this.fuselageCodeSuccess = false;
                }
            },
            showPopup() {
                this.show = true;
            },
            onAddrConfirm: function (value){
                this.areaName=value.map(item => item.name).join("-");
                this.areaData=value;
                this.show = false;
            },
            shut: function () {
                this.show = false;
            },
            onGeneralClick: function (link, queryParams) {
                this.$router.push({
                    path: link,
                    query: queryParams
                });//其中login是你定义的一个路由模块
            },
            async submit() {
                let data = this.info
                data.name = this.name
                data.gender = this.gender
                data.contact = this.contact
                data.areaName = this.areaName
                data.street = this.street
                data.address = this.address
                if(this.info.midxuc015!=null && this.info.midxuc015 != ''){
                    let res1 = await post("/user/CreateOrUpdateGurantee", {
                        devId: this.info.midxuc015,
                        info: JSON.stringify(data)
                    })
                    Toast.success('报修卡创建或更新成功');
                    let res2 = await post("/user/bindDevice", {
                        devId: this.info.midxuc015,
                    })
                    Toast.success('用户设备绑定成功');
                    this.onGeneralClick('/home',null)
                }else {
                    Toast.success('找不到该机身码的锁,无法绑定!!!');
                }
            },
            scanQRCode: function (){
                //微信浏览器
                let jsApiTicket = JSON.parse(Base64.decode(getCookie("jsapiTicket")))
                wx.config({
                    debug: false,
                    beta: true,
                    appId: jsApiTicket.AppId,
                    timestamp: jsApiTicket.Timestamp,
                    nonceStr: jsApiTicket.NonceStr,
                    signature: jsApiTicket.Signature,
                    jsApiList: [
                        'scanQRCode',
                    ]
                })
                let _this = this
                wx.ready(function () {
                    wx.scanQRCode({
                        needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                        success: function (res) {
                            let result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                            _this.getDeviceInfo(result)
                            //alert("扫描结果：" + result);
                            // window.location.href = result;//因为我这边是扫描后有个链接，然后跳转到该页面
                        },
                        error:function(res){
                            alert(res)
                        }
                    });
                })
            }
        }
    }
</script>

<style scoped>
    /*当前用户信息*/
    .addDevice > .userName{
        text-align: left;
        color: rgba(120, 120, 120, 0.5);
        margin: 3vw 0 3vw 4vw;
    }

    .addDevice > .fuselageCode{
        width: 100vw;
        margin: 0 0 3vw 0;
        text-align: left;
    }

    .addDevice > .banner {
        background: #fff;
        background-size: 100% 100%;
        width: 100vw;
        height: 90vw;
        display: flex; /*Flex布局*/
        flex-direction: column; /*Flex主轴方向为从上到下，交叉轴从左到右*/
        justify-content: center;
        align-items: center;
    }

    /*表单*/
    .addDevice > .banner > .field {
        width: 90vw;
        height: 16.6%;
        display: flex; /*Flex布局*/
        align-items: center;
    }

    .addDevice > .banner > .field > .text {
         width: 30vw;
         text-align: left;
         color: rgba(120, 120, 120, 1);
     }

    .addDevice > .banner > label {
        border-bottom: solid 1px rgba(120, 120, 120, 0.1);
    }

    /*特殊表单样式*/
    .addDevice > .banner > .field > .gender {
        display: flex; /*Flex布局*/
        justify-content: center;
    }

    /**/
    .addDevice > .description1{
        text-align: left;
        font-size: 10px;
        color: rgba(120, 120, 120, 1);
        margin-top: 4vw;
        margin-left: 4vw;
    }
    .addDevice > .description2{
        text-align: left;
        font-size: 10px;
        color: rgba(120, 120, 120,1);
        margin-top: 2vw;
        margin-left: 4vw;
    }

    /* 按钮*/
    .addDevice > .buttonList > .flex {
        width: 100vw;
        min-height: 30vh;
        display: flex;
        justify-content: center;
        line-height: 10vh;
    }

    .addDevice > .buttonList > .flex > .flexItem {
        width: 80vw;
        min-height: 8vh;
        background: url(../../assets/product_orange.png) no-repeat;
        color: #fff;
        background-size: 100% 100%;
        align-self: center;
    }

</style>
